<script setup lang="ts">
import { gsap } from "gsap";
import { randomMath } from "@/util/util";
import { ref, onMounted ,inject,onUpdated, reactive, nextTick,onBeforeUnmount} from "vue";
import {useRouter,useRoute} from "vue-router";
// @ts-ignore
import { faker, fakerZH_CN } from '@faker-js/faker';
// @ts-ignore
import { v4 as uuidv4 } from 'uuid';
const router = useRouter()
let audio = inject('audioDom') as any // 导入全局的音乐播放
console.log('audio',audio)
let startRoot = ref();


// 网页设备的可视区域配置信息
interface viewConfig {
  screenW: number;
  screenH: number;
}

// 小蛋糕配置
interface cakeConfig {
  maxOffsetX: string | number; // 最大偏移x
  minOffsetX: string | number; // 最小偏移x
  maxOffsetY: string | number; // 最大偏移量Y 需要是一个负数 隐藏在页面上面进行开始下降
  minOffsetY: string | number;
  mineSize: number; //  蛋糕自身的宽度大小
}

let viewConfig: viewConfig = {
  screenH: 0,
  screenW: 0,
};
let cakeConfig: cakeConfig = {
  maxOffsetX: 0,
  minOffsetX: 0,
  maxOffsetY: 0,
  minOffsetY: 0,
  mineSize: 45,
};

// 获取设备信息
let getComputedInfo = () => {
  let x = document.body.clientWidth;
  let y = document.body.clientHeight;
  viewConfig.screenW = x;
  viewConfig.screenH = y;
  console.log("当前设备的配置信息", viewConfig);
};

const startCount = 20; // 小蛋糕生成数量

// 小蛋糕生成随机位置
let randomStrawCookie = () => {
  cakeConfig.maxOffsetX = viewConfig.screenW - cakeConfig.mineSize / 2;
  cakeConfig.maxOffsetY = viewConfig.screenH / 10 + cakeConfig.mineSize / 2;
  // console.log('小蛋糕配置',cakeConfig);
  let startDOMList = startRoot.value.querySelectorAll(".straw-cookie");
  startDOMList.forEach((strawCookieItem: any) => {
    let _x = randomMath(0, cakeConfig.maxOffsetX as number);
    let _y = -randomMath(cakeConfig.mineSize, cakeConfig.maxOffsetY as number); // 负数
    strawCookieItem.style.left = _x + "px";
    strawCookieItem.style.top = _y + "px";
  });
  gsap.to(startDOMList, {
    duration: 6,
    y: viewConfig.screenH + cakeConfig.mineSize + cakeConfig.maxOffsetY,
    ease: "bounce",
    stagger: 0.4,
    rotateZ: "440deg",
    // 所有动画结束之后
    onComplete: () => {
      console.log("所有动画结束");
    },
  });
};

let startDownHandler = () => {
  getComputedInfo();
  randomStrawCookie();
};
// 是否页面首次进入
let isFirstLogin = ref<boolean>((sessionStorage.getItem('isFirstLogin')+'') == 'false' ? false : true)
console.log('session',sessionStorage.getItem('isFirstLogin'))


// 开启声音
let openSound = () => {
  isFirstLogin.value = false
  sessionStorage.setItem('isFirstLogin', 'false')
  audio.value.muted  = false
  audio.value.volume = 1
  audio.value.play()
}

// 先进行检测是否可以免手动播放音乐
let checkSound = async () => {
    let paused = audio.value.paused
    if(paused){
      try {
        await audio.value.play()
      }catch (e) {
        console.log('不能自动播放')
        isFirstLogin.value = true
      }
    }
}

onUpdated(() => {
  checkSound()
})


// 点击切换类目函数
let switchHandler = (path:string) => {
  router.push(path)
}


// 留言接口
interface comment {
  cid:string|number,
  content:string,
  uname:string|number|'热心网友',
  createTime:string,
}

// 评论列表
let comments = reactive<any>([])
let msg = ref<string>('')
let commentsRoot = ref()
// 添加评论函数
let addComment = async (content:string) => {
  let uname = fakerZH_CN.internet.displayName()
  uname = uname.replace(/[0-9]/g,'')
  let comment:comment = {
    cid: uuidv4(),
    content,
    uname,
    createTime: '2022-11-14',
  }
  comments.push(comment)
}

/* test测试 ***********************************************/
// 添加单条处理函数
let  pushComment = (comment:comment) => {
  comments.push(comment)
}
/* ****************************************************/

// 生成数据
let count = 25
let strArr = ['生日快乐!','愿你快乐，不止今天','今天谁是小寿星 哦 是你啊','生日快乐啊~','沾沾好运气','哇塞 美女','生日快乐!','愿你快乐，不止今天','今天谁是小寿星 哦 是你啊','生日快乐啊~','沾沾好运气','哇塞 美女',"祝你生日快乐！", "愿你的每一天都充满阳光！", "愿你的生活如诗如画！", 
    "希望你在新的一岁里更加幸福！", "祝你健康、快乐、成功！", 
    "愿你的梦想都能实现！", "感谢你的存在，生日快乐！", 
    "愿你的未来充满美好和惊喜！", "祝你度过一个难忘的生日！", 
    "🦳希望你可以一直保持年轻的心态！", "祝你拥有一个充满爱的生日！", 
    "愿你的生日充满欢声笑语和温馨！", "祝福你在新的一年里更加出色！", 
    "愿你的生日像阳光一样温暖！", "祝你的生日过得开心、满足！", 
    "希望你的生日特别又难忘！", "愿你的生日充满美好的回忆！", 
    "祝你在新的一岁里收获满满！", "愿你的生日带来无尽的欢乐和祝福！"]
    let timer:any = null
let randData = () => {
  let s = 0
  timer = setInterval(() => {
    s++
    if(s>count) {
      comments.splice(0,1)
    }
    addComment(strArr[randomMath(0,strArr.length - 1)])
    nextTick(() => {
      moveComments()
    })
  },randomMath(1000,2000))
}


// 滚动
let moveComments = () => {
  let s:any
  // document.getElementsByClassName('comments')[0].scrollTop = 10000
  let height = 0
  let nodeList = commentsRoot.value.querySelectorAll('.comment-item')
  height = nodeList[nodeList.length - 1].offsetTop
  commentsRoot.value?.scrollTo({top:height, behavior: 'smooth'})
}

onMounted(() => {
  startDownHandler();
  checkSound()
  randData()
});

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="home">
    <p style="font-family: 摆烂躺平;">2023.11.14</p>
    <div class="mark">
      <div class="head">
        <div class="head-inner">
          <img
            class="head-gif"
            src="@/assets/images/text_birthday.gif"
            alt=""
            srcset=""
          />
          <div class="head-cover-box">
            <img
              class="cover"
              src="http://149.88.64.236:2003/public/images/photo_1.jpg"
              alt=""
              srcset=""
            />
          </div>
          <div class="util-box">
            <h2 class="name">院佩奇</h2>
            <h3 class="custrom-font">生日快乐</h3>
            <div class="menu-list">
              <button @click="switchHandler('/photos')" class="menu-item">photos</button>
              <button @click="switchHandler('/video')" class="menu-item">Video</button>
              <button @click="switchHandler('/card')" class="menu-item">Lucky</button>
            </div>
          </div>
        </div>
      </div>
      <div class="startRoot" ref="startRoot">
        <img
          v-for="(item, index) in startCount"
          :key="index"
          class="straw-cookie"
          src="~@/assets/images/mobiel/strawCookie.png"
          alt=""
        />
      </div>
    </div>
    <!-- 首次进入的交互提示 -->
    <div v-if="isFirstLogin" class="tips animate__animated animate__bounceInUp">
      <button class="tips-btn" @click="openSound">请开启声音</button>
    </div>
    <!-- 留言 -->
    <div class="barrage-box animate__animated animate__backInLeft" ref="commentsRoot">
      <div v-for="(comment,index) in comments" :key="index" class="comment-item">
          <span class="com">
            {{ comment.uname }}:{{ comment.content }}
          </span>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/images/mobiel/mobiel_bg_1.png");
  background-size: cover;
  background-repeat: no-repeat;
  h2 {
    font-family: 摆烂躺平;
    color: black;
  }
  .mark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgb(219, 211, 211);
    .startRoot {
      width: 100%;
      height: 100%;
    }
    .straw-cookie {
      position: absolute;
      top: 0;
      left: 0;
      width: 35px;
      height: 35px;
    }
    .head {
      width: 100%;
      height: 100vh;
      position: absolute;
      left: 0%;
      top: 10%;
      // background: red;
      .head-inner {
        position: relative;
        width: 100%;
        height: 100%;
        .head-gif {
          position: absolute;
          left: 0px;
          top: 0px;
        }
        .head-cover-box {
          position: absolute;
          left: 50px;
          top: 120px;
          width: 60px;
          height: 60px;
          border-radius: 100%;
          border: 6px solid rgb(247, 200, 46);
          overflow: hidden;
          .cover {
            width: 100%;
            object-fit: cover;
          }
        }
        .util-box {
          // background-color: aqua;
          box-sizing: border-box;
          padding: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 80%;
          position: absolute;
          top: 200px;
          left: 50%;
          transform: translateX(-50%);
          .menu-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 20px;
            .menu-item {
              box-sizing: border-box;
              margin: 15px 0px;
              width: 80%;
              height: 50px;
              line-height: 50px;
              outline: none;
              border: none;
              text-align: center;
              font-weight: bold;
              font-family: 摆烂躺平;
              font-size: 23px;
              // color: rgb(216, 27, 96);
              color: #fff;
              background-color: rgb(240, 98, 146);
              // background-image: linear-gradient(90deg, #FAD961 33%, #F76B1C 100%);
              border-radius: 32px;
              box-shadow: 0px 0px 10px rgb(240, 98, 146);
            }
          }
        }
      }
    }
  }
  .mark::selection {
    user-select: none;
  }
  .tips {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #FAACA8;
    background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
    position: fixed;
    top: 0px;
    .tips-btn {
      box-sizing: border-box;
              margin: 15px 0px;
              width: 60%;
              height: 50px;
              line-height: 50px;
              outline: none;
              border: none;
              text-align: center;
              font-weight: bold;
              font-family: 摆烂躺平;
              font-size: 23px;
              // color: rgb(216, 27, 96);
              color: #fff;
              background-color: rgb(240, 98, 146);
              // background-image: linear-gradient(90deg, #FAD961 33%, #F76B1C 100%);
              border-radius: 32px;
              box-shadow: 0px 0px 10px rgb(240, 98, 146);
    }
  }
  // 留言
  .barrage-box {
    position: fixed;
    z-index: 13;
    left: 0px;
    bottom: 0px;
    width: 60%;
    height: 200px;
    overflow: hidden;
    ::-webkit-scrollbar {
      display: none;
    }
    .comment-item {
      display: inline-block;
      margin: 8px 10px;
      .com {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: 30px;
        padding: 4px 15px;
        font-size: 12px;
        line-height: 22px;
        color: #fff;
        border-radius: 12px;
        background-color: rgba(49, 48, 48, 0.226);
      }
    }
  }
}
</style>
